<template>
  <van-list
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <ul class="goodslist-box" ref="listRef">
    <li v-for="item in goodsList" :key="item.proid" :style="{left:item.left+'px',top:item.top+'px'}" >
      <img :src="item.img1"/>
    </li>
  </ul>
</van-list>

</template>

<script>
export default {
  data(){
    return {
      // loading:true,
      finished:false,
      goodsList:[],
      tops:[0,0],//定义一个数组，保存当前两列的top值
    }
  },
  created(){
    this.$http.get("/pro/list")
    .then(res=>{
      if(res.data.code==="200"){
        this.goodsList = res.data.data;        
        this.goodsList.forEach((item,idx)=>(idx%2==0)?item.left=0:item.left=100);
        console.log("this.goodsList",this.goodsList);
        this.$nextTick(()=>{
          this.updatePos()
        });
        // this.loading = false;
        // this.finished = true;
      }
    })
  },
  methods:{
    // 重新定位图片的函数
    updatePos(){
      let liDoms = this.$refs.listRef.children;
      console.log("liDoms",liDoms);
      console.log("liDoms[0]",liDoms[0]);
      console.log("liDoms[0].queryselect('img')",liDoms[0].querySelector('img'));

      this.goodsList.forEach((item,index)=>{
        if(index%2==0){
          item.left = 0;
          item.top = this.tops[0];          
          this.tops[0] += liDoms[index].children[1].offsetHeight;
        }else{
          item.left = 100;
          item.top = this.tops[1]
          this.tops[1] += liDoms[index].children[1].offsetHeight;
        }        
        console.log(liDoms[index].children[1].offsetHeight);
      });

    },
    load(){

    }
  }

}
</script>

<style scoped>

.goodslist-box{
  width: 100%;
  position: relative;
}

.goodslist-box li{
  position: absolute;
  width: 100px;
}

.goodslist-box li img{
  width: 100%;
}
</style>